<template>
  <div v-echartsResize="echartsResize" class="echats1" ref="echartsRef">

  </div>
</template>
<script  setup>
import { reactive, ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { getEarthquakeMagnitudek } from '@/api/seismicInformations.js'
let echartsInit = ref(null)
const echartsRef = ref()
const echartsData = reactive([
  { value: 0, name: '<2级' },
  { value: 0, name: '3-4级' },
  { value: 0, name: '5-6级' },
  { value: 0, name: '>7级' }
])
let option = reactive({
  title: {
    text: '近一年各地区地震等级总览',
    textStyle: {
      //---主标题内容样式
      color: '#fff'
    },
    // subtext: '副标题', //---副标题内容样式
    // subtextStyle: {
    //   color: '#bbb'
    // },
    padding: [25, 0, 0, 80] //---标题位置,因为图形是是放在一个dom中,因此用padding属性来定位
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '85%',
    left: 'center',
    itemHeight: 12, //修改icon图形大小
    textStyle: {
      fontSize: 12,
      color: '#E6E8FA'
    }
  },
  color: ['#33CCFF', '#FFFF66', '#FFCC66', '#FF3333'],
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: ['30%', '50%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: echartsData
    }
  ]
})
const echartsInitFn = () => {
  echartsInit = echarts.init(echartsRef.value)
  echartsInit.setOption(option, true)
}
const echartsResize = () => {
  echartsInit?.resize()
}
const getEarthquakeMagnitudekFn = () => {
  getEarthquakeMagnitudek().then(res => {
    res.data.forEach((item, index) => {
      echartsData[index].value = item
      option.series[0].data = echartsData
    })
    echartsInitFn()
  })
}
onMounted(() => {
  echartsInitFn()
  getEarthquakeMagnitudekFn()
})
</script>
<style scoped>
.echats1 {
  width: 100%;
  height: 100%;
}
</style>